一.防抖和节流理解、解决

2024-07-10 23:24| 来源: 网络整理| 查看: 265

理解防抖

防抖(Debounce)：指在一定时间内，如果事件被多次触发，只执行最后一次操作。

节流

节流(Throttle)：指在一定时间内，如果事件被多次触发，只执行第一次操作。

方便理解，以现实生活举例（这个例子也是我学习的时候，学习前辈的文章感觉最能让我理解的例子），例如：坐电梯，如果设置电梯从人进入电梯到关门时间为10s，那么防抖就是，第一个人进入，电梯关门要10s，那在这期间又进入电梯一个人，那关门时间就要重新计算，从最后一个进入电梯的人开始计算到关门需要10s，也就是从第一个人进入电梯到关门是大于10s的;节流就是第一个人进入，电梯关门要10s，中间不管进入几个人，10s电梯门就会关，也就是从第一个人进入电梯到关门就只有10s。

解决防抖

原理就是，在规定时间内不再触发该事件才会执行。即设定一个时间周期延迟执行动作，若该期间又被触发，则重新设定周期，直到时间周期结束才执行动作。

第一个方法：不停重置定时器。缺点：高频的创建定时器定时器期间，有新操作时，清空旧定时器，重设新定时器 function debounce(fn, cycle) => { //fn:需要执行的操作，cycle:时间周期 let timer, timeStamp=0; let _this, args; //创建定时器执行方法的操作 function runFn(){ timer= setTimeout(()=>{ fn.apply(_this,args); },cycle); } //清除定时器 let clean = () => { clearTimeout(timer); } return function(){ _this=this; args=arguments; let now = (new Date()).getTime(); if(now-timeStamp < cycle){ //时间周期没到，清除定时器，重新计算时间，创建定时器方法 clean(); run(); }else{ run(); } timeStamp=now; } } 节流

规定时间内只运行一次，若在时间内重复触发，只有一次生效。

第一个方法:通过时间戳实现 function throttle(fn,cycle) { //定义初始时间 var startTime=0; return function() { var _this=this; var args=arguments; //当前时间戳 var newTime = new Date(); //判断用当前时间减去开始的时间，如果大于cycle指定的时间就会触发 if(newTime-startTime>cycle) { //执行触发的函数 fn.apply(_this,args) //将开始时间更新 startTime=newTime; } } 应用

防抖：： search搜索联想，用户在不断输入值时，用防抖来节约请求资源。节流：鼠标不断点击触发，mousedown(单位时间内只触发一次)，例如表单的提交。 window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。

【本文地址】

一.防抖和节流理解、解决

一.防抖和节流理解、解决

今日新闻

推荐新闻